<template>
    <el-form ref="ruleFormRef" :model="formDate" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
        <el-form-item label="类目名称" prop="name">
            <el-input v-model="formDate.name" />
        </el-form-item>
        <el-form-item label="类目图片" prop="img">
            <!-- <el-input v-model="formDate.img" /> -->
            <Tuku v-model="formDate.img"></Tuku>
        </el-form-item>
        <el-form-item label="热门排序" prop="seq">
            <!-- <el-input v-model="formDate.seq" /> -->
            <el-input-number v-model="formDate.seq" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="父目录ID" prop="parentId">
            <!-- <el-input v-model="formDate.parentId" /> -->
            <el-tree-select v-model="formDate.parentId" :data="categorydata" check-strictly :render-after-expand="false"
                style="width: 240px" />
        </el-form-item>
        <el-form-item label="最近更新人" prop="lastUpdateBy">
            <el-input v-model="formDate.lastUpdateBy" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                提交
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { CategoryApi } from '@/api'
import Tuku from '@/components/tuku/Tuku.vue'
import { ElMessage } from 'element-plus'
import router from '@/router'
//reactive 创建响应式数据对象，返回是一个对象类型
const formDate=reactive({
    name:'',
    img:'',
    seq:0,
    parentId: 0,
    lastUpdateBy:''
})
const ruleFormRef = ref()
const rules = reactive({
    name: [
        { required: true, message: '输入的名称必须是2 to 5 个字符', trigger: 'blur' },
        { min: 2, max: 5, message: 'Length should be 2 to 5', trigger: 'blur' },
    ],
})
const categorydata =ref([
    {
        value: 0,
        label: '一级目录',
        children: [
            {
                value: '1-1',
                label: 'Level two 1-1',
                children: [
                    {
                        value: '1-1-1',
                        label: 'Level three 1-1-1',
                    },
                ],
            },
        ],
    },
])

onMounted(() => {
    callCategoryApitree()
})

//定义格子信息
const callCategoryApitree = () => {
    CategoryApi.select.call().then((res:any)=>{
       console.log(res);
        //获取数据遍历并赋值
        res.forEach((item:any) => {
            item.value = item.id  // 索引
            item.label = item.name // 名称
        });
        const categorydata2 = res.reduce((hezi: any, currentValue: any) => {
            currentValue.children = res.filter((item: any) => {
                return item.parentId === currentValue.id
            })
            // console.log("currentValue=",currentValue);
            if (currentValue.parentId === 0) {
                hezi.push(currentValue)
            }

            return hezi
       },[])
       console.log(categorydata2);
       categorydata.value = categorydata2
    })
}

const formsubmit =()=>{
    CategoryApi.insert.call({
        name: formDate.name,
        img: formDate.img,
        seq: formDate.seq,
        parentId: formDate.parentId,
        lastUpdateBy: formDate.lastUpdateBy
    }).then((res:any)=>{
        console.log(res);
        ElMessage.success("添加成功")
        //路由跳转到列表页面并刷新数据列表页面数据
        router.push({ name: 'category-list' })
        //刷新页面选择框
        callCategoryApitree()
    })
}

const submitForm = async (formEl:any) => {
    if (!formEl) return
    await formEl.validate((valid:any, fields:any) => {
        if (valid) {
            console.log('submit!')
            formsubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: any) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>

</style>